<template>
  <div id="main">
    <div class="from_wrap">
      <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-item label="文章类别" has-feedback validate-status="error">
          <a-select default-value="1">
            <a-select-option value="1">Option 1</a-select-option>
            <a-select-option value="2">Option 2</a-select-option>
            <a-select-option value="3">Option 3</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="创建时间" has-feedback validate-status="success">
          <a-date-picker class="date" style="width: 100%" />
        </a-form-item>
        <a-form-item label="文章标题" has-feedback validate-status="success">
          <a-input allow-clear placeholder="请输入文章标题" />
        </a-form-item>
      </a-form>
      <mavon-editor class="mdeditor" v-model="value" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      }
    }
  }
}
</script>

<style lang='scss' scoped>
#main{
  height: 100%;
}
.from_wrap{
  height: 100%;
  .mdeditor{
    height: 70%;
  }
}
.ant-calendar-panel{
  background-color: red;
  z-index: 999;
}
</style>
